<template>
    <div>
        <Dropdown trigger="click" @on-click="selectLang">
            <a href="javascript:void(0)">
                {{ title }}
                <Icon :size="18" type="md-arrow-dropdown"/>
            </a>
            <DropdownMenu slot="list">
                <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{{ value }}
                </DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </div>
</template>

<script>
    export default {
        name: 'Language',
        props: {
            lang: String
        },
        data() {
            return {
                langList: {
                    'zh-CN': '语言',
                    'zh-TW': '語言',
                    'en-US': 'Lang'
                },
                localList: {
                    'zh-CN': '中文简体',
                    'zh-TW': '中文繁体',
                    'en-US': 'English'
                }
            }
        },
        watch: {
            lang(lang) {
                this.$i18n.locale = lang
            }
        },
        computed: {
            title() {
                return this.langList[this.lang]
            }
        },
        methods: {
            selectLang(name) {
                this.$emit('on-lang-change', name)
            }
        }
    }
</script>
